<template>
  <div>
<!--    <el-table-->
<!--      :data="tableData"-->
<!--      border-->
<!--      style="width: 100%">-->
<!--      <el-table-column-->
<!--        label="状态"-->
<!--        width="80">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.state | statefmt}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="code"-->
<!--        label="编号"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="下单时间"-->
<!--        width="180">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.createDate | datefmt('YYYY/MM/DD')}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="customerName"-->
<!--        label="公司名称"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="linkmanId"-->
<!--        label="联系电话"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="price"-->
<!--        label="税前价格(￥)"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="taxRate"-->
<!--        label="税率"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="priceIt"-->
<!--        label="税后价格"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="address"-->
<!--        label="操作"-->
<!--        width="120">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="primary" @click="payMany(scope.row.id)">付款</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
    <el-row>
      <el-col :span="8" v-for="item in tableData" >
        <el-card class="box-card" v-infinite-scroll="load">
          <div slot="header" class="clearfix">
            <el-button type="primary"  plain size="small"  @click="bill(item.code)">{{item.code}}</el-button>
            <el-button type="primary"  plain disabled size="small">{{item.state|statefmt}}</el-button>
            <el-button style="float: right" type="primary" @click="payManys(item)">付款</el-button>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span=18 style="margin-top: 10px">
                下单时间：{{item.createDate|formatDate}}
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                联系人名称：{{item.customerName}}
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                联系人名称：{{item.linkmanName}}
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                联系电话：{{item.linkmanTel}}
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                税前价格：￥{{item.price}}
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                税率：{{item.taxRate}}%
              </el-col>
              <el-col :span=18 style="margin-top: 10px">
                税后价格：￥{{item.priceIt}}
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="订单支付"
      :visible.sync="isShowPayMent"
      width="40%">
      <div class="tr_rechbox">
        <div class="tr_rechcho am-form-group">
          <span>支付方式：</span>
          <el-radio v-model="payment.paytype" :label="0"><img src="@/assets/image/zfbpay.png" width="99px" height="33px"></el-radio>
          <el-radio v-model="payment.paytype" :label="1"><img src="@/assets/image/wechatpay.png" width="99px" height="33px"></el-radio>
        </div>
        <div class="tr_rechnum">
          <span>应付金额：</span>
          <p class="rechnum">{{payment.priceit}}元</p>
        </div>
      </div>
      <div class="tr_paybox">
        <el-divider/>
        <span><el-button type="primary" style="float: right;" @click="payMent">确认支付</el-button></span>
        <el-divider/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CustomerOrder',
    data(){
      return{
        tableData:[],
        count:0,
        isShowPayMent:false,
        payment:{}
      }
    },
    methods:{
      bill:function(code){

        //跳转路由后查询显示
        this.$router.push('/billAdd?code=' + code);
      },
      payManys:function(a){
        this.payment.priceit=a.priceIt
        this.payment.code=a.code
        this.payment.customerName=a.customerName
        this.isShowPayMent=true
      },
      load () {
        this.count += 2
      },
      payMent:function(){
        this.$http.post("/alipay/pay",this.payment).then((res) => {
          if (res.data.success) {
            debugger
            document.write(res.data.result);//字符串写入浏览器
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      getOrderByState:function (id,cus) {//根据状态进行订单查询
        this.$http.post("/order/getOrderByState/"+id+"/"+cus).then((res) => {
          this.tableData=res.data.result
        });
      },

    },
    mounted () {
      var id =this.$route.query.id
      var loginUser =this.$route.query.loginUser
      this.getOrderByState(id,loginUser)
    }
  }
</script>

<style scoped>
  .list li {
    height: 30px;
    margin: 5px 0;
    background: #8c939d;
    list-style: decimal;
  }
  .infinite-list-wrapper p {
    text-align: center;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
  .rechnum {
    color: #ec5a5b;
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    line-height: 40px;
  }
  .tr_rechnum {
    height: 40px;
  }
  .tr_rechcho {
    margin-bottom: 20px;
    display: inline-block;
  }
  .am-form-group {
    margin-bottom: 1.5rem;
  }
  .tr_paybox {
    padding: 20px;
  }
  .am-form-group>label>span {
    color: #999;
  }
  .am-radio .am-icon-unchecked, .am-radio .am-icon-checked {
    top: 13px;
  }
</style>
